<template>
<div style="background-color: white;">
    <div><van-cell title="日期范围：" :value="dateRange" isLink @click="showPickDate=true"/></div>
    <ve-line :data="chartData" :height="chartHeight" />
    <van-cell title="今日预计收益：" style="margin-top: -30px;">
        <div slot="right-icon" class="income_text"><span>{{income.toFixed(2)}}</span></div>
    </van-cell>
    <pick-date :show="showPickDate" @picked="onDatePicked" @cancel="onDateCancel"/>
</div>
</template>

<script>
import { Panel, Popup } from 'vant';
import VeLine from 'v-charts/lib/line.common';
import moment from 'moment';
import { COMMANDER_ORDER_COUNT, COMMANDER_INCOME_EXPECT} from '@/api/user';
import PickDate from '@/vue/components/pick-date-range/';

export default {
    name: 'module-commission',

    data() {
        const today = new Date();
        let startDate = today.setHours(0, 0, 0, 0);
        let endDate = today.setHours(23, 59, 59, 999);

        return {
            chartData: {
                columns: ['日期', '当日实际商品销售数量'],
                rows: []
            },
            startDate,
            endDate,
            income: 0,
            showPickDate: false
        } 
    },
    computed: {
        dateRange() {
            return moment(this.startDate).format("MM.DD") + ' - ' + moment(this.endDate).format("MM.DD");
        },
        chartHeight() {
            return this.chartData.rows.length > 0 ? '290px' : '50px';
        }
    },
    created() {
        this.$reqGet(COMMANDER_INCOME_EXPECT, {memberId: this.user.id}).then(res => {
            this.income = res.data.data;
        });

        this.initData(this.user.id);
    }, 
    methods: {
        initData(userId) {
            this.$reqGet(COMMANDER_ORDER_COUNT, {
                memberId: userId, 
                start: this.startDate, 
                end: this.endDate
            }).then(res => {
                this.chartData.rows = [];
                let rows = this.chartData.rows;

                res.data.data.forEach(item => {
                    rows.push({'日期': moment(item.orderDate, "YYYY-MM-DD").format("MM.DD"), '当日实际商品销售数量': item.orderNum});
                });
            });
        },

        onDatePicked(start, end) {
            this.startDate = start.getTime();
            this.endDate = end.getTime();
            this.showPickDate = false;
            this.initData(this.user.id);
        },
        onDateCancel() {
            this.showPickDate = false;
        }
    },

    components: {
        [Panel.name]: Panel,
        [VeLine.name]: VeLine,
        [Popup.name]: Popup,
        [PickDate.name]: PickDate
    }
}
</script>

<style lang="scss" scoped>
.income_text {
    color: $red;
    font-size: 18px;

    ::before {
        content: '¥';
        font-size: 8px;
        margin-right: 3px;
    }
}

</style>
